<div id="start-ui" data-bind="with: $root.start">
  <div class="left-list-header left-list-header-start-ui">
    <span class="left-list-header-text" data-bind="text: teamName" data-uie-name="status-team-name-search"></span>
    <span class="left-list-header-close-button button-icon-large icon-close" data-bind="click: clickOnClose, l10n_tooltip: z.string.tooltipSearchClose" data-uie-name="do-close"></span>
  </div>
  <div id="start-ui-header" class="start-ui-header border-theme" data-bind="css: {'start-ui-header-integrations': enableIntegrations()}">
    <user-input class="start-ui-header-user-input"
                params="input: searchInput, placeholder: z.string.searchPlaceholder, enter: handleSearchInput"
                data-uie-name="enter-search">
    </user-input>
    <!-- ko if: enableIntegrations() -->
      <div class="start-ui-list-tabs">
        <div class="start-ui-list-tab" data-bind="click: clickOnShowPeople, css: {'active' : peopleTabActive()}, l10n_text: z.string.searchPeople" data-uie-name="do-add-people"></div>
        <div class="start-ui-list-tab" data-bind="click: clickOnShowServices, css: {'active' : !peopleTabActive()}, l10n_text: z.string.searchServices" data-uie-name="do-add-services"></div>
      </div>
    <!-- /ko -->
  </div>

  <div class="left-list-center start-ui-list-wrapper">
    <div class="start-ui-list" data-bind="antiscroll: shouldUpdateScrollbar, bordered_list: teamName">
      <!-- ko if: showSpinner() -->
        <div class="start-ui-list-spinner">
          <span class="icon-spinner spin"></span>
        </div>
      <!-- /ko -->

      <!-- ko ifnot: showSpinner() -->
        <!-- ko if: peopleTabActive() -->
          <!-- ko if: showNoMatches() -->
            <div class="start-ui-no-contacts" data-bind="l10n_text: z.string.searchNoContactsOnWire"></div>
          <!-- /ko -->

          <!-- ko if: showNoSearchResults() -->
            <div class="start-ui-no-search-results" data-bind="l10n_text: z.string.searchTrySearch"></div>
          <!-- /ko -->

          <!-- ko ifnot: showSearchResults() -->
            <!-- ko if: showInviteMember() -->
              <ul class="start-ui-invite-people left-list-items">
                <li class="left-list-item left-list-item-clickable" data-bind="click: clickOnInviteMember" data-uie-name="do-invite-member">
                  <div class="left-column icon-envelope"></div>
                  <div class="center-column" data-bind="l10n_text: z.string.searchMemberInvite"></div>
                </li>
              </ul>
            <!-- /ko -->
            <!-- ko if: showContacts() -->
              <ul class="start-ui-create-group left-list-items">
                <li class="left-list-item left-list-item-clickable" data-bind="click: clickOnCreateGroup" data-uie-name="go-create-group">
                  <group-icon class="left-column"></group-icon>
                  <div class="center-column" data-bind="l10n_text: z.string.searchCreateGroup"></div>
                </li>
              </ul>
            <!-- /ko -->
            <!-- ko if: showCreateGuestRoom() -->
              <ul class="start-ui-create-guest-room left-list-items">
                <li class="left-list-item left-list-item-clickable" data-bind="click: clickOnCreateGuestRoom" data-uie-name="do-create-guest-room">
                  <guest-icon class="left-column"></guest-icon>
                  <div class="center-column" data-bind="l10n_text: z.string.searchCreateGuestRoom"></div>
                </li>
              </ul>
            <!-- /ko -->
            <!-- ko if: showTopPeople() -->
              <div class="start-ui-list-top-people" data-uie-name="status-top-people">
                <span class="start-ui-list-header start-ui-list-header-top-people" data-bind="l10n_text: z.string.searchTopPeople"></span>
                <top-people class="search-list-theme-black" params="users: topUsers, click: clickOnContact"></top-people>
              </div>
            <!-- /ko -->
            <!-- ko if: showContacts() -->
              <div class="start-ui-list-contacts" data-uie-name="status-contacts">
                <!-- ko if: isTeam() -->
                  <span class="start-ui-list-header start-ui-list-header-contacts" data-bind="l10n_text: z.string.searchContacts"></span>
                <!-- /ko -->
                <!-- ko ifnot: isTeam() -->
                  <span class="start-ui-list-header" data-bind="l10n_text: z.string.searchConnections"></span>
                <!-- /ko -->
                <user-list class="search-list-theme-black" params="user: contacts, click: clickOnContact"></user-list>
              </div>
            <!-- /ko -->
          <!-- /ko -->

          <!-- ko if: showSearchResults() -->
            <div class="start-ui-list-search-results">
              <div class="contacts" data-bind="visible: searchResults.contacts().length > 0">
                <!-- ko if: isTeam() -->
                  <span class="start-ui-list-header start-ui-list-header-contacts" data-bind="l10n_text: z.string.searchContacts"></span>
                <!-- /ko -->
                <!-- ko ifnot: isTeam() -->
                  <span class="start-ui-list-header start-ui-list-header-connections" data-bind="l10n_text: z.string.searchConnections"></span>
                <!-- /ko -->
                <user-list class="search-list-theme-black" params="user: searchResults.contacts, click: clickOnContact"></user-list>
              </div>
              <div class="start-ui-groups" data-bind="visible: searchResults.groups().length > 0">
                <!-- ko if: isTeam() -->
                  <span class="start-ui-list-header" data-bind="l10n_text: z.string.searchTeamGroups"></span>
                <!-- /ko -->
                <!-- ko ifnot: isTeam() -->
                  <span class="start-ui-list-header" data-bind="l10n_text: z.string.searchGroups"></span>
                <!-- /ko -->
                <group-list params="groups: searchResults.groups, click: clickOnConversation"></group-list>
              </div>
              <div class="others" data-bind="visible: searchResults.others().length > 0">
                <span class="start-ui-list-header" data-bind="l10n_text: z.string.searchOthers"></span>
                <user-list class="search-list-theme-black" params="user: searchResults.others, click: clickOnOther, mode: z.components.UserList.MODE.OTHERS"></user-list>
              </div>
            </div>
          <!-- /ko -->
        <!-- /ko -->

        <!-- ko ifnot: peopleTabActive() -->
          <service-list params="services: services, click: clickOnOther, isSearching: isSearching"></service-list>
        <!-- /ko -->
      <!-- /ko -->
    </div>
  </div>

  <!-- ko if: showNoContacts() -->
    <div class="start-ui-import-container">
      <div>
        <h1 class="start-ui-import-headline" data-bind="l10n_text: z.string.searchInviteHeadline"></h1>
        <!-- ko if: window.wAddressBook -->
          <div class="start-ui-import-buttons" data-bind="click: clickOnImportContacts" data-uie-name="from-contacts">
            <div class="start-ui-import-buttons-icon icon-contacts"></div>
            <span class="label-bold-xs" data-bind="l10n_text: z.string.searchInviteButtonContacts"></span>
          </div>
        <!-- /ko -->
        <div class="start-ui-import-buttons" data-bind="click: clickOnImportGmail" data-uie-name="from-gmail">
          <svg class="start-ui-import-buttons-icon">
            <use xlink:href="#icon-gmail"></use>
          </svg>
          <span class="label-bold-xs" data-bind="l10n_text: z.string.searchInviteButtonGmail"></span>
        </div>
        <div class="start-ui-import-detail" data-bind="l10n_text: z.string.searchInviteDetail"></div>
      </div>
    </div>
  <!-- /ko -->

  <!-- ko if: showInvitePeople() -->
    <div class="start-ui-import" id="invite-button" data-bind="click: clickToShowInviteBubble" data-bubble="#invite-bubble" data-placement="top">
      <span class="icon-invite start-ui-import-icon"></span>
      <span data-bind="l10n_text: z.string.searchInvite"></span>
    </div>
  <!-- /ko -->

  <!-- ko if: userProfile() -->
    <div id="start-ui-user-bubble" class="start-ui-user-bubble bubble" data-bind="css: additionalBubbleClasses">
      <!-- ko ifnot: userProfileIsService() -->
        <user-profile params="user: userProfile,
                              accept: clickToAcceptInvite,
                              connect: clickToSendRequest,
                              ignore: clickToIgnoreInvite,
                              unblock: clickToUnblock"></user-profile>
      <!-- /ko -->

      <!-- ko if: userProfileIsService() -->
        <div class="start-ui-service">
          <div class="start-ui-service-body">
            <div class="start-ui-service-details">
              <!-- ko if: renderAvatar() -->
                <participant-avatar params="participant: userProfile, size: z.components.ParticipantAvatar.SIZE.LARGE"></participant-avatar>
              <!-- /ko -->
              <div class="start-ui-service-details-content">
                <div class="start-ui-service-name" data-bind="text: userProfile().name" data-uie-name="status-service-name"></div>
                <div class="start-ui-service-provider" data-bind="text: userProfile().providerName()" data-uie-name="status-service-provider"></div>
              </div>
            </div>

            <!-- ko ifnot: showServiceConversationList() -->
              <div class="start-ui-service-description" data-bind="text: userProfile().description" data-uie-name="status-service-description"></div>
            <!-- /ko -->
          </div>

          <!-- ko if: showServiceConversationList() -->
            <div class="start-ui-service-conversations">
              <user-input class="start-ui-service-conversations-input user-list-light" params="input: searchConversationInput, placeholder: z.string.searchServicePlaceholder" spellcheck="false" data-uie-name="enter-conversations"></user-input>
              <div class="start-ui-service-conversation-list-wrapper">
                <div class="start-ui-service-conversations-list" data-bind="antiscroll: shouldUpdateServiceScrollbar">
                  <div class="start-ui-service-conversations-create" data-bind="click: clickToCreateServiceConversation" data-uie-name="do-create-conversation">
                    <div class="icon-plus"></div>
                    <div class="start-ui-service-conversations-create-text" data-bind="text: z.string.searchServiceNewConversation"></div>
                  </div>
                  <!-- ko foreach: serviceConversations() -->
                    <conversation-list-cell params="conversation: $data" data-bind="click: $parent.clickToAddService" data-uie-name="item-conversation"></conversation-list-cell>
                  <!-- /ko -->
                </div>
              </div>
            </div>
          <!-- /ko -->

          <!-- ko ifnot: showServiceConversationList() -->
            <div class="start-ui-service-footer">
              <button class="start-ui-service-button" data-bind="click: clickOnAddService, l10n_text: z.string.searchServiceConfirmButton" data-uie-name="do-service-confirm"></button>
            </div>
          <!-- /ko -->
        </div>
      <!-- /ko -->
    </div>
  <!-- /ko -->

  <div id="invite-bubble" class="invite-bubble bubble">
    <div class="invite-bubble-inner">
      <!-- ko if: showInviteForm() -->
        <div class="invite-bubble-link">
          <div class="invite-content">
            <div class="invite-header" data-bind="l10n_text: z.string.inviteHeadline"></div>
            <div class="invite-link-box">
              <div class="bg bg-theme"></div>
              <textarea data-bind="value: inviteMessage" class="message" dir="auto"></textarea>
            </div>
          </div>
          <div class="invite-footer" data-bind="text: inviteHint"></div>
        </div>
        <div class="invite-bubble-button" data-bind="click: clickToCloseGenericInvite, l10n_text: z.string.searchInviteShare" data-uie-name="go-import-form"></div>
      <!-- /ko -->

      <!-- ko ifnot: showInviteForm() -->
        <div class="invite-bubble-link">
          <div class="invite-content">
            <h1 class="invite-header" data-bind="l10n_text: z.string.searchInviteHeadline"></h1>
            <!-- ko if: window.wAddressBook -->
              <div class="start-ui-import-buttons" data-bind="click: clickOnImportContacts" data-uie-name="do-contacts-import">
                <div class="start-ui-import-buttons-icon icon-contacts"></div>
                <span class="label-bold-xs" data-bind="l10n_text: z.string.searchInviteButtonContacts"></span>
              </div>
            <!-- /ko -->
            <div class="start-ui-import-buttons" data-bind="click: clickOnImportGmail" data-uie-name="do-google-import">
              <svg class="start-ui-import-buttons-icon">
                <use xlink:href="#icon-gmail"></use>
              </svg>
              <span class="label-bold-xs" data-bind="l10n_text: z.string.searchInviteButtonGmail"></span>
            </div>
            <div class="start-ui-import-detail" data-bind="l10n_text: z.string.searchInviteDetail"></div>
          </div>
        </div>
        <div class="invite-bubble-button" data-bind="click: clickToShowGenericInvite, l10n_text: z.string.searchInvite" data-uie-name="go-invite-form"></div>
      <!-- /ko -->
    </div>
  </div>
</div>
